<!-- 示例模板 -->
<template>
    <div class="e-scoreTable">
        <div id="Top">
            <div>
                <span class="green"></span>
                新增
            </div>
            <div>
                <span class="yellow"></span>
                修改
            </div>
            <div>
                <span class="pink"></span>
                删除
            </div>
        </div>
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="a" label="序号"> </el-table-column>
            <el-table-column prop="b" label="外包方名称"> </el-table-column>
            <el-table-column label="A">
                <template slot-scope="scope">
                    <el-radio
                        @change="
                            HandleScore(scope.row, scope.$index, '1', 'scoreA')
                        "
                        v-model="scope.row.scoreA"
                        label="1"
                        ><span>{{ scope.row.aa }}</span></el-radio
                    >
                </template>
            </el-table-column>
            <el-table-column label="B">
                <template slot-scope="scope">
                    <el-radio
                        @change="
                            HandleScore(scope.row, scope.$index, '2', 'scoreB')
                        "
                        v-model="scope.row.scoreB"
                        label="2"
                        ><span>{{ scope.row.aa }}</span></el-radio
                    >
                </template>
            </el-table-column>
            <el-table-column label="C">
                <template slot-scope="scope">
                    <el-radio
                        @change="
                            HandleScore(scope.row, scope.$index, '3', 'scoreC')
                        "
                        v-model="scope.row.scoreC"
                        label="3"
                        ><span>{{ scope.row.aa }}</span></el-radio
                    >
                </template>
            </el-table-column>
            <el-table-column label="D">
                <template slot-scope="scope">
                    <el-radio
                        @change="
                            HandleScore(scope.row, scope.$index, '4', 'scoreD')
                        "
                        v-model="scope.row.scoreD"
                        label="4"
                        ><span>{{ scope.row.aa }}</span></el-radio
                    >
                </template>
            </el-table-column>
            <el-table-column label="集团评价">
                <template slot-scope="scope">
                    <!-- {{ scope.row.aa }} -->
                    <el-dropdown>
                        <span class="el-dropdown-link">
                            <i
                                class="el-icon-caret-bottom"
                                style="color: #dadada"
                            ></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item
                                @click.native="
                                    HandleScore(
                                        scope.row,
                                        scope.$index,
                                        '1',
                                        'scoreA'
                                    )
                                "
                                >A</el-dropdown-item
                            >
                            <el-dropdown-item
                                @click.native="
                                    HandleScore(
                                        scope.row,
                                        scope.$index,
                                        '2',
                                        'scoreB'
                                    )
                                "
                                >B</el-dropdown-item
                            >
                            <el-dropdown-item
                                @click.native="
                                    HandleScore(
                                        scope.row,
                                        scope.$index,
                                        '3',
                                        'scoreC'
                                    )
                                "
                                >C</el-dropdown-item
                            >
                            <el-dropdown-item
                                @click.native="
                                    HandleScore(
                                        scope.row,
                                        scope.$index,
                                        '4',
                                        'scoreD'
                                    )
                                "
                                >D</el-dropdown-item
                            >
                        </el-dropdown-menu>
                    </el-dropdown>
                    {{
                        scope.row.scoreA
                            ? 'A'
                            : scope.row.scoreB
                            ? 'B'
                            : scope.row.scoreC
                            ? 'C'
                            : scope.row.scoreD
                            ? 'D'
                            : ''
                    }}
                </template>
            </el-table-column>
            <el-table-column label="集团评价意见" width="170">
                <template slot-scope="scope">
                    <el-input
                        v-model="scope.row.idea"
                        placeholder="请输入"
                    ></el-input>
                </template>
            </el-table-column>
        </el-table>
        <Epagination />
    </div>
</template>

<script>
import Epagination from '@/components/pagination/pagination.vue'
export default {
    data () {
        return {
            radio: '1',
            tableData: [
                {
                    a: '项目名称',
                    b: '王小虎',
                    scoreA: false,
                    scoreB: false,
                    scoreC: false,
                    scoreD: false,
                    idea: ''
                },
                {
                    a: '项目名称',
                    b: '王小虎',
                    scoreA: false,
                    scoreB: false,
                    scoreC: false,
                    scoreD: false,
                    idea: ''
                },
                {
                    a: '项目名称',
                    b: '王小虎',
                    scoreA: false,
                    scoreB: false,
                    scoreC: false,
                    scoreD: false,
                    idea: ''
                },
                {
                    a: '项目名称',
                    b: '王小虎',
                    scoreA: false,
                    scoreB: false,
                    scoreC: false,
                    scoreD: false,
                    idea: ''
                }
            ]
        }
    },
    components: {
        Epagination
    },
    methods: {
        HandleScore (row, index, score, scoreName) {
            this.tableData[index].scoreA = false
            this.tableData[index].scoreB = false
            this.tableData[index].scoreC = false
            this.tableData[index].scoreD = false
            this.tableData[index][scoreName] = score
        }
    }
}
</script>

<style lang="scss" scoped></style>
